import { select } from "d3-selection";

function defaultLabel(d) {
    return d.data.name;
}
export function transformFlameData(flameArray) {
    const result = {};
    console.log(flameArray, "array");

    // let depth = 0;
    const maxDepth = Math.max(...flameArray.map((item) => item.depth));

    flameArray.forEach((item) => {
        item.name = item.funcName;
        item.value = item.endPosition - item.startPosition;
    });
    const recursiveGenerateTreeData = (depth, sourceData, targetData) => {
        if (depth > maxDepth) {
            return;
        }
        if (depth === 0) {
            targetData.name = sourceData[0].funcName;
            targetData.value =
                sourceData[0].endPosition - sourceData[0].startPosition;
            targetData.x1 = sourceData[0].startPosition;
            targetData.x2 = sourceData[0].endPosition;
            targetData.maxValue =
                sourceData[0].endPosition - sourceData[0].startPosition;
            targetData.children = sourceData.filter(
                (item) => item.depth === depth + 1
            );
            targetData.children.forEach((item) => {
                item.maxValue = targetData.maxValue;
                recursiveGenerateTreeData(depth + 1, sourceData, item);
            });
        } else {
            const { endPosition, startPosition, depth } = targetData;
            targetData.x1 = targetData.startPosition;
            targetData.x2 = targetData.endPosition;
            const children = sourceData.filter(
                (item) =>
                    item.depth === depth + 1 &&
                    item.startPosition >= startPosition &&
                    item.endPosition <= endPosition
            );

            if (children.length) {
                targetData.children = children;
                targetData.children.forEach((item) => {
                    item.maxValue = targetData.maxValue;
                    recursiveGenerateTreeData(depth + 1, sourceData, item);
                });
            }
        }
    };
    recursiveGenerateTreeData(0, flameArray, result);
    return result;
}

export function flameGraphTip() {
    const rootElement = select("body");
    let tooltip;
    // Function to get HTML content from data.
    let html = defaultLabel;
    // Function to get text content from data.
    let text = defaultLabel;
    // Whether to use d3's .html() to set content, otherwise use .text().
    let contentIsHTML = false;

    function tip() {
        tooltip = rootElement
            .append("div")
            .style("display", "none")
            .style("position", "absolute")
            .style("opacity", 0)
            .style("pointer-events", "none")
            .attr("class", "custom-flame-graph-tooltip");
    }

    tip.show = function (d) {
        console.log(event, "event");
        console.log(tooltip, "tooltip", d);
        const { maxValue, startPosition } = d.data;
        //   const left =  value >= maxDepth / 2 ?
        tooltip
            ?.style("display", "block")
            .style("left", event?.pageX + 5 + "px")
            .style("top", event?.pageY + 5 + "px")
            // .transition()
            // .duration(200)
            .style("opacity", 1)
            .style("pointer-events", "all");
        if (startPosition >= maxValue / 2) {
            tooltip.style("transform", " translateX(-100%)");
        } else {
            tooltip.style("transform", " translateX(0px)");
        }
        if (contentIsHTML && tooltip) {
            tooltip.html(html(d));
        } else {
            tooltip.text(text(d));
        }

        return tip;
    };

    tip.hide = function () {
        tooltip
            .style("display", "none")
            // .transition()
            // .duration(200)
            .style("opacity", 0)
            .style("pointer-events", "none");

        return tip;
    };

    /**
     * Gets/sets a function converting the d3 data into the tooltip's textContent.
     *
     * Cannot be combined with tip.html().
     */
    tip.text = function (_) {
        if (!arguments.length) return text;
        text = _;
        contentIsHTML = false;
        return tip;
    };

    /**
     * Gets/sets a function converting the d3 data into the tooltip's innerHTML.
     *
     * Cannot be combined with tip.text().
     *
     * @deprecated prefer tip.text().
     */
    tip.html = function (_) {
        if (!arguments.length) return html;
        html = _;
        contentIsHTML = true;
        return tip;
    };

    tip.destroy = function () {
        tooltip.remove();
    };

    return tip;
}

export function genTipHtml(d) {
    console.log(d, "html");
    const { name, value, maxValue } = d.data;
    return `<div class="custom-flame-graph-tooltip-main">
        <div class="custom-flame-graph-tip-title mb4">${name}</div>
        <div class="custom-flame-graph-tip-name mb4">${name}</div>
        <div class="custom-flame-graph-tip-inner">
            <span class="custom-flame-graph-tip-field">用时占比</span>
            <span class="custom-flame-graph-tip-value">${
                ((value / maxValue) * 100).toFixed(2) + "%"
            }</span>
        </div>
    </div>`;
}
